<template>
  <div class="product-detail">
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">产品名字：</span>
        {{productDetail.name}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">创建时间：</span>
        {{productDetail.createTime}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">更新时间：</span>
        {{productDetail.updateTime}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">描述：</span>
        {{productDetail.descs}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">最高价格：</span>
        {{productDetail.maxPrice}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">最低价格：</span>
        {{productDetail.minPrice}}</span>
    </div>
    <div class="margin-bottom-10">
      <span><span class="t-14 color-6">系列名称：</span>
        {{productDetail.seriesName}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">产品类型：</span>
        {{productDetail.type==1?'烟杆':'烟弹'}}</span>
    </div>
    <div class="margin-bottom-10">
      <span>
        <span class="t-14 color-6">计数单位：</span>
        {{productDetail.unit}}</span>
    </div>
    <div>
      <p>产品主图</p>
      <img :src="productDetail.mainImgUrl" />
    </div>
    <div class="margin-top-10 margin-bottom-10">
      <p>产品轮播图</p>
      <img :src="item"
           style="display:block"
           v-for="(item,index) in productDetail.productCarouselImageUrlList"
           :key="index" />
    </div>
    <div>
      <p>产品详情图</p>
      <img :src="item"
           style="display:block"
           v-for="(item,index) in productDetail.productDetailImageUrlList"
           :key="index" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'product-detail',
  computed: {
    ...mapState('product', ['productDetail'])
  }
}
</script>

<style lang="scss" scoped>
.product-detail img {
  max-width: 400px;
}
</style>